<template>
	<w-container id='colection' :loading='loading' class="bg-color-pageBg">
		<w-navbar :placeholder="false" :product="product" :title="pageTitle" :bgColor="bgColor" navType="goods"></w-navbar>
		<!-- 主图部分 -->
		<product-details-card :product='product'></product-details-card>
	
		<view class="plr-16 ptb-12">
			<view class="bg-color-white br-12 pa-12 product-introduce">
				<view class="title font-color-black font-size-16">商品详情</view>
				<view class="mt-12">
					<u-parse style="color: #fff;" :content='handleLang(info.details)'></u-parse>
				</view>
			</view>
		</view>
		
		<shop-goods-action :info='info'/>
	</w-container>
</template>

<script>
	import {
		getGoodsInfo
	} from '@/api/shop/shop.js';
	import productMixin from '@/mixins/product.js'
	import opacityMixin from '@/mixins/opacityNav.js'
	import ShopGoodsAction from '../components/shop-goods-action.vue';
	import productDetailsCard from '../components/product-details-card.vue';
	export default {
		mixins: [ productMixin,opacityMixin ],
		components: { ShopGoodsAction,productDetailsCard },
		data() {
			return {
				loading: false,
				goods_id: null,
				info:{product: {}}
			};
		},
		computed: {
			product(){
				return this.info.product;
			}
		},
		onLoad({ id }) {
			this.goods_id = id;
			
		},
		onShow() {
			this.getDetails();
		},
		onPullDownRefresh() {
			this.getDetails()
		},
		methods: {
			async getDetails() {
				this.loading = true
				try {
					let res = await getGoodsInfo({ goods_id: this.goods_id})
					this.info = res.data;
					this.$set(this.info,'product',{});
					this.info.product.goods_type=3;
					let {crystal_type,crystal_number,stock,main_image,id} = this.info
					this.info.product.crystal={
						crystal_type,
						crystal_price:crystal_number,
						stock
					}
					this.info.product.listimg = this.info.list_image;
					this.info.product.name = this.info.goods_name;
					this.info.product.main_image = main_image;
					this.info.product['3d_url_type'] = 'img';
				} catch (e) {
					setTimeout(() => {
						this.backPage()
					}, 1500)
				} finally {
					uni.stopPullDownRefresh()
					this.loading = false;
				}
			},
			rightAction() {
				this.$u.route('/pages/blindBox/openRecord', {
					id: this.product.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
#colection{
	padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
	.title{
		font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
		background: linear-gradient(90deg, #DF0007 0%, rgba(0,102,254,0) 100%);
		background-size:40rpx 16rpx;
		background-position:left 16rpx;
		background-repeat: no-repeat;
	}
}
</style>
